<!DOCTYPE html>
<html>
  <head>
    <title>dragon</title>
    <!--mobile apps-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="keywords"
      content="My Resume Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
	SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"
    />
    <script type="application/x-javascript">
      addEventListener("load", function () {
             setTimeout(hideURLbar, 0);
         }, false);
         function hideURLbar() {
             window.scrollTo(0, 1);
         }
    </script>
    <!--mobile apps-->
    <!--Custom Theme files-->
    <link rel="shortcut icon" href="images/your_ico.ico" type="image/x-icon" />
    <link rel="icon" href="images/your_ico.ico" type="image/x-icon" />
    <link
      href="css/bootstrap.css"
      type="text/css"
      rel="stylesheet"
      media="all"
    />
    <link href="css/style.css" type="text/css" rel="stylesheet" media="all" />
    <link rel="stylesheet" href="css/swipebox.css" />
    <link rel="stylesheet" href="css/preview.css">
    <!--//Custom Theme files-->
    <!--js-->
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--    获取访问者信息-->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <!-- //js -->
    <!--start-smooth-scrolling-->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function ($) {
        $('.scroll').click(function (event) {
          event.preventDefault();
          $('html,body').animate(
            { scrollTop: $(this.hash).offset().top },
            1000
          );
        });
      });
    </script>
    <!--//end-smooth-scrolling-->
  </head>
  <body>
    <!--banner-->
    <div id="home" class="banner">
      <div class="banner-info">
        <div class="container">
          <div class="col-md-4 header-left zoomImgBox">
            <img src="images/img1.jpg" class="zoomImg" alt="" />
          </div>
          <div class="col-md-8 header-right">
            <h2>Hello</h2>
            <h1>My name is FanQingLong</h1>
            <h3 style="color: #f3e000">前端工程师</h3>
            <ul class="address">
              <li>
                <ul class="address-text">
                  <li><b>联系电话 </b></li>
                  <li><a href="tel:16601116686">16601116686</a></li>
                </ul>
              </li>
              <li>
                <ul class="address-text">
                  <li><b>居住地址 </b></li>
                  <li>
                    <a
                      href="https://map.baidu.com/poi/%E5%8C%97%E8%8B%91%E8%B7%AF%E5%8C%97/@12960459.818229102,4843579.745527591,19z?uid=bc362b624525bbe9c5f50dde&ugc_type=3&ugc_ver=1&device_ratio=2&compat=1&pcevaname=pc4.1&querytype=detailConInfo&da_src=shareurl"
                      target="_blank"
                      >北京朝阳区</a
                    >
                  </li>
                </ul>
              </li>
              <li>
                <ul class="address-text">
                  <li><b>个人邮箱 </b></li>
                  <li>
                    <a
                      href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=279364752@qq.com"
                      target="_blank"
                      >279364752@qq.com</a
                    >
                  </li>
                </ul>
              </li>
              <li>
                <ul class="address-text">
                  <li><b>个人博客</b></li>
                  <li>
                    <a href="https://www.cnblogs.com/webdragon/" target="_blank"
                      >https://www.cnblogs.com/webdragon</a
                    >
                  </li>
                </ul>
              </li>
              <li>
                <ul class="address-text">
                  <li><b>gitHub </b></li>
                  <li>
                    <a href="https://fanqinglong.github.io/" target="_blank"
                      >https://fanqinglong.github.io</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!--//banner-->
    <!--top-nav-->
    <div class="top-nav wow">
      <div class="container">
        <div class="navbar-header logo">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
          >
            导航
          </button>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <div class="menu">
            <ul class="nav navbar">
              <li><a href="#work" class="scroll">个人经历</a></li>
              <li><a href="#skills" class="scroll">专业技能</a></li>
              <li><a href="#projects" class="scroll">部分作品</a></li>
              <li><a href="#education" class="scroll">教育背景</a></li>
              <li><a href="#about" class="scroll">关于我</a></li>

              <li><a href="#contact" class="scroll">联系我</a></li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
    <!--//top-nav-->
    <!--work-experience-->
    <div id="work" class="work">
      <div class="container">
        <h3 class="title">个人经历</h3>
        <div class="work-info">
          <div class="col-md-6 work-left">
            <h4>2020/04 - 至今 </h4>
          </div>
          <div class="col-md-6 work-right">
            <h5><span class="glyphicon glyphicon-briefcase"> </span> <a href="https://map.baidu.com/search/%E5%8C%97%E4%BA%AC%E6%98%93%E8%81%8A%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8/@12976511.80500005,4825087.529999999,19z?querytype=s&da_src=shareurl&wd=%E5%8C%97%E4%BA%AC%E6%98%93%E8%81%8A%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&c=1&src=0&wd2=%E5%8C%97%E4%BA%AC%E5%B8%82%E6%9C%9D%E9%98%B3%E5%8C%BA&pn=0&sug=1&l=5&b=(5094899.603246396,987382.6304280078;20823539.6032464,8663286.630428009)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&sug_forward=5882a09315bb274226e0a0b1&device_ratio=1" target="_blank" style="color:#F7E612">北京易聊技有限公司 </a></h5>
            <p>工作地点：动漫大厦</p>
            <p>经营范围:易聊在线客服产品可接入网站、H5、小程序并覆盖30多个主流推广流量平台，搭建全渠道、
              全场景客户触点，实现统一服务入口，一站式运营管理，助力企业全面提升访客接待效率</div>
    
          <div class="clearfix"></div>
        </div>
        <div class="work-info">
          <div class="col-md-6 work-left">
            <h4>2018/10 - 2020/03</h4>
          </div>
          <div class="col-md-6 work-right">
            <h5><span class="glyphicon glyphicon-briefcase"> </span> <a href="https://map.baidu.com/poi/%E9%87%91%E8%8B%91%E5%A4%A7%E5%8E%A6/@12960450.158432271,4844279.875326254,19z?uid=34059f97fedf905470455b8a&ugc_type=3&ugc_ver=1&device_ratio=1&compat=1&pcevaname=pc4.1&querytype=detailConInfo&da_src=shareurl" target="_blank" style="color:#F7E612">北京悦维联动网络科技有限公司</a></h5>
  
            <p>工作地点：金苑大厦</p>
            <p>
              经营范围:技术推广服务；计算机系统服务；基础软件服务；应用软件服务（不含医用软件）；软件开发；产品设计；模型设计；包装装潢设计；经济贸易咨询；公共关系服务；会议服务；工艺美术设计；电脑图文设计、制作；企业策划；设计、制作、代理、发布广告；市场调查；企业管理咨询；企业策划、经济贸易咨询；组织文化艺术交流活动（不含演出）；文艺创作；承办展览展示活动；翻译服务；自然科学研究；工程和技术研究；农业科学研究；医学研究（不含诊疗活动）；数据处理（数据处理中的银行卡中心、PUE值在1.5以上的云计算数据中心除外）；销售计算机、软件及辅助设备、日用品、服装、鞋帽、文具用品、电子产品、工艺品。（企业依法自主选择经营项目，开展经营活动；依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动；不得从事本市产业政策禁止和限制类项目的经营活动。
            </p>
          </div>
          <div class="clearfix"></div>
        </div>

        <div class="work-info">
          <div class="col-md-6 work-left">
            <h4>2015/10—2018.10</h4>
          </div>
          <div class="col-md-6 work-right">
            <h5><span class="glyphicon glyphicon-briefcase"> </span> <a href="https://map.baidu.com/search/%E4%B8%AD%E5%9B%BD%E8%81%94%E9%80%9A%E5%A4%A7%E5%8E%A6/@12953750.578927228,4826714.87558,19z?querytype=s&da_src=shareurl&wd=%E4%B8%AD%E5%9B%BD%E8%81%94%E9%80%9A%E5%A4%A7%E5%8E%A6&c=131&src=0&pn=0&sug=0&l=12&b=(12923013.012691902,4813626.321704082;12984532.877896035,4843649.297587557)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&device_ratio=1" target="_blank" style="color:#F7E612">联通时科（北京）信息技术有限公司</a> </h5>
  
            <p>工作地点：中国联通大厦</p>
            <p>
              经营范围：第二类增值电信业务中的信息服务业务（不含固定电话信息服务）（增值电信业务经营许可证有效期至2019年01月23日）（依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）
            </p>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!--//work-experience-->
    <!--skills-->
    <div id="skills" class="skills">
      <div class="container">
        <h3 class="title">专业技能</h3>
        <div class="skills-info">
          <div class="col-md-6 bar-grids">
            <h6>VUE <span> 98% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 98%"
              ></div>
            </div>
            <h6>JAVASCRIPT<span> 93% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 93%"
              ></div>
            </div>
            <h6>HTML/CSS<span>100% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 100%"
              ></div>
            </div>
            <h6>BOOSTARP <span> 100% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 100%"
              ></div>
            </div>
          </div>
          <div class="col-md-6 bar-grids">
            <h6>ANGULAR<span> 90% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 90%"
              ></div>
            </div>
            <h6>LAYUIJS<span> 100% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 100%"
              ></div>
            </div>

            <h6>REACT<span>80% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 80%"
              ></div>
            </div>
            <h6>GULP、WEBPACK<span> 80% </span></h6>
            <div class="progress">
              <div
                class="progress-bar progress-bar-striped active"
                style="width: 80%"
              ></div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!--//education-->
    <!--portfolio-->
    <div id="projects" class="portfolio">
      <div class="container">
        <h3 class="title wow zoomInLeft animated" data-wow-delay=".5s">
          部分作品
        </h3>
        <div class="sap_tabs">
          <div
            id="horizontalTab"
            style="display: block; width: 100%; margin: 0px"
          >
            <ul
              class="resp-tabs-list wow fadeInUp animated"
              data-wow-delay=".7s"
            >
              <li class="resp-tab-item"><span>All</span></li>
              <li class="resp-tab-item"><span>HTML/CSS/JAVASCRIPT</span></li>
              <li class="resp-tab-item"><span> VUE</span></li>
              <li class="resp-tab-item"><span>ANGULAR</span></li>
              <li class="resp-tab-item"><span>REACT</span></li>
            </ul>
            <div class="clearfix"></div>
            <div class="resp-tabs-container">
              <div class="tab-1 resp-tab-content">
                <div class="tab_img">
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/easyl.png"
                        class="swipebox"
                        title="我的项目"
                      >
                        <img
                          src="images/easyl.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>

                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://easyliao.com"
                            >
                              易聊官网</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid effect-sarah">
                      <a
                        href="images/g2.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g2.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://2i.10010.com/"
                            >
                              互联网智慧中台（中国联通）</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g3.png"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g3.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://yq.yowin.cn/"
                            >
                              舆情数据平台</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/AI.png"
                        class="swipebox"
                        title="Ai机器人流程系统。"
                      >
                        <img
                          src="images/AI.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p><a target="_blank" style="color: #fff;" href="">
                            Ai机器人流程系统</a></p>
                        </div>
                      </a>
                    </div>
                  </div>

                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g11.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g11.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g6.png"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g6.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://yuexiang.yowin.cn/"
                            >
                              悦享云平台</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g7.png"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g7.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>百度家居节活页面</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g8.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g8.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g9.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g9.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://yiqing.idmp.cn/"
                            >
                              时信大数据肺炎疫情</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g10.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g10.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://dragon.fanqinglong.com:1000/"
                            >
                              个人项目</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>

                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/55.jpg"
                        class="swipebox"
                        title="红星美凯龙"
                      >
                        <img
                          src="images/g5.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://hxjz.yueweiliandong.com"
                            >
                              红星美凯龙</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g12.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g12.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://hxjz.yueweiliandong.com"
                            >
                              红星美凯龙</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>

                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="tab-1 resp-tab-content">
                <div class="tab_img">
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g5.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g5.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g6.png"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g6.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://yuexiang.yowin.cn/"
                            >
                              悦享云平台</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g7.png"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g7.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>百度家居节活页面</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="tab-1 resp-tab-content">
                <div class="tab_img">
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g3.png"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g3.png"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://admin.yowin.cn/"
                            >
                              舆情数据管理后台</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g1.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g1.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://admin.jiaju120.com"
                            >
                              拓维云家居后台系统</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g9.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g9.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://yiqing.idmp.cn/"
                            >
                              时信大数据肺炎疫情</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="tab-1 resp-tab-content">
                <div class="tab_img">
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g2.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g2.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://2i.10010.com/"
                            >
                              互联网智慧中台（中国联通）</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g4.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g4.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g8.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g8.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="tab-1 resp-tab-content">
                <div class="tab_img">
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g10.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g10.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>
                            <a
                              target="_blank"
                              style="color: #fff"
                              href="http://dragon.fanqinglong.com:1111/"
                            >
                              个人项目</a
                            >
                          </p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g11.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g11.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="col-md-4 portfolio-grids">
                    <div class="grid">
                      <a
                        href="images/g12.jpg"
                        class="swipebox"
                        title="你好。请继续关注，后续会完善完整。"
                      >
                        <img
                          src="images/g12.jpg"
                          alt=""
                          class="img-responsive"
                        />
                        <div class="figcaption">
                          <h3>My<span> Project</span></h3>
                          <p>正在完善中。。。。。</p>
                        </div>
                      </a>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--ResponsiveTabs-->
        <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function () {
            $('#horizontalTab').easyResponsiveTabs({
              type: 'default', //Types: default, vertical, accordion
              width: 'auto', //auto or any width like 600px
              fit: true, // 100% fit in a container
            });
          });
        </script>
        <!--//ResponsiveTabs-->
        <!-- swipe box js -->
        <script src="js/jquery.swipebox.min.js"></script>
        <script type="text/javascript">
          jQuery(function ($) {
            $('.swipebox').swipebox();
          });
        </script>
        <!-- //swipe box js -->
      </div>
    </div>

    <div class="welcome contact" id="contact">
      <div class="container">
        <h3 class="title">联系我</h3>
        <div class="contact-row">
          <div class="col-md-6 contact-left">
            <iframe
              src="http://map.baidu.com/#panoid=09002200011706171137054909Z&panotype=street&heading=0&pitch=0&l=19&tn=B_NORMAL_MAP&sc=0&newmap=1&shareurl=1&pid=09002200011706171137054909Z"
            ></iframe>
          </div>
          <div class="col-md-6 contact-right">
            <div class="address-left">
              <p id="city" style="line-height: 3.2em"></p>
            </div>
            <div class="address-right">
              <p>手机号 : <a href="tel:16601116686">16601116686</a></p>
              <p>
                E-mail :
                <a
                  href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=279364752@qq.com"
                  target="_blank"
                  >279364752@qq.com</a
                >
              </p>
            </div>
            <div class="clearfix"></div>
            <div class="contact-form">
              <form action="#" method="post">
                <h3 style="color: #fff">请留下您的足迹：</h3>

                <input
                  class="name"
                  type="text"
                  name="Name"
                  placeholder="Name"
                  required=""
                />
                <input
                  class="email"
                  name="Email"
                  type="text"
                  placeholder="Email"
                  required=""
                />
                <input
                  class="phone"
                  name="phone"
                  type="text"
                  placeholder="Phone"
                  required=""
                />
                <textarea
                  class="message"
                  name="Message"
                  placeholder="Message"
                  required=""
                ></textarea>
                <!--                        <input type="button" id="btn" value="提交">-->
                <input type="button" id="btn" value="提交" />
              </form>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!--//contact -->
    <!--footer-->
    <div class="footer">
      <div class="container"></div>
      <div style="text-align: center; color: #fff">
        <span style="margin-right: 30px">CopyRight@copy2017 </span>
        <a
          href="http://beian.miit.gov.cn"
          style="color: #fff"
          title="京ICP备16040055号"
          >京ICP备16040055号</a
        >
      </div>
    </div>
    <!--//footer-->
    <!--smooth-scrolling-of-move-up-->
    <script type="text/javascript">
      $(document).ready(function () {
        var defaults = {
          containerID: 'toTop', // fading element id
          containerHoverID: 'toTopHover', // fading element hover id
          scrollSpeed: 1200,
          easingType: 'linear',
        };

        $().UItoTop({ easingType: 'easeOutQuart' });
        $('#city').html(returnCitySN['cname'] + '朝阳区');
      });
      $('#btn').click(function () {
        if ($('.name').val() == '') {
          alert('您的名字不能为空');
        } else if ($('.email').val() == '') {
          alert('您的邮箱不能为空');
        } else if ($('.phone').val() == '') {
          alert('您的手机号不能为空');
        } else if ($('.message').val() == '') {
          alert('您的留言不能为空');
        } else {
          $.ajax({
            type: 'post',
            url: 'http://dragon.fanqinglong.com:8888/login',
            data: {
              name: $('.name').val(),
              email: $('.email').val(),
              phone: $('.phone').val(),
              message: $('.message').val(),
              date: getNowDate(),
              IP: returnCitySN['cip'],
              CID: returnCitySN['cid'],
              city: returnCitySN['cname'],
              browser: getBrowserInfo(),
            },
            success: function () {
              alert('提交成功');
              $('.name').val('');
              $('.email').val('');
              $('.phone').val('');
              $('.message').val('');
            },
            error: function (error) {
              console.log(error);
            },
          });
        }
      });
    </script>
    <script src="./js/preview.js"></script>
    <!--埋点-->
    <script type="text/javascript">
      (function (m, ei, q, i, a, j, s) {
        m[i] =
          m[i] ||
          function () {
            (m[i].a = m[i].a || []).push(arguments);
          };
        (j = ei.createElement(q)), (s = ei.getElementsByTagName(q)[0]);
        j.async = true;
        j.charset = 'UTF-8';
        j.src = 'https://static.meiqia.com/dist/meiqia.js?_=t';
        s.parentNode.insertBefore(j, s);
      })(window, document, 'script', '_MEIQIA');
      _MEIQIA('entId', 151510);
      showZoomImg('.zoomImg', 'img');
    </script>

    <script src="js/bootstrap.js"></script>

    <script src="./js/maidian.js"></script>
  </body>
</html>
